<template>
  <div class="wrap">
    <x-header :left-options="{backText: ''}"
              class="arrow-weight">{{title}}报到人员情况表</x-header>
    <main style="position:relative;background:#fff;padding-bottom:30px;top:44px">
      <tab>
        <tab-item selected
                  @on-item-click="toArrive">报到人员{{'('+isArrive.length+')'}}</tab-item>
        <tab-item @on-item-click="toNoarrive">未报到人员{{'('+noArrive.length+')'}}</tab-item>
      </tab>
      <x-table full-bordered>
        <thead>
          <tr>
            <th>姓名</th>
            <th>班级</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list"
              :key="index">
            <td>{{item.name}}</td>
            <td>{{item.classes}}</td>
            <td>{{item.sex}}</td>
          </tr>
        </tbody>
      </x-table>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      list: [],
      isArrive: [],
      noArrive: []
    };
  },
  mounted() {
    this.onNoReport();
    this.onReportClick();
  },
  methods: {
    onNoReport() {
      this.$vux.loading.show({
        text: "Loading"
      });
      setTimeout(() => {
        this.$vux.loading.hide();
      }, 500);
      this.axios({
        method: "get",
        url: "/student/showStuByCAC",
        params: {
          type: localStorage.getItem("type"),
          key: localStorage.getItem("name"),
          sex: localStorage.getItem("sex"),
          status: 2
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            this.noArrive = res.data.result;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    onReportClick() {
      this.axios({
        method: "get",
        url: "/student/showStuByCAC",
        params: {
          type: localStorage.getItem("type"),
          key: localStorage.getItem("name"),
          sex: localStorage.getItem("sex"),
          status: 1
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            this.list = res.data.result;
            this.isArrive = res.data.result;
          } else if (resp.data.code == 2) {
            this.$router.push("/admin/login");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    toArrive() {
      this.list = this.isArrive;
    },
    toNoarrive() {
      this.list = this.noArrive;
    }
  }
};
</script>

<style scoped>
.wrap {
  height: 100vh;
  background: #fff;
}
.vux-header {
  text-align: center;
  font-size: 20px;
  letter-spacing: 2px;
  background: rgb(0, 160, 233);
  width: 100%;
  position: fixed;
  z-index: 1;
}
.vux-table {
  background-color: #fff;
  width: 90%;
  margin: 20px auto 0px;
}
.vux-tab-item {
  font-size: 16px !important;
}
th {
  color: #666;
  font-weight: bolder !important;
  font-size: 18px;
}
.arrow-weight /deep/ .left-arrow:before {
  border: 3px solid #fff !important;
  border-width: 2px 0px 0px 2px !important;
}
</style>